<template>
  <div class="member-management">
    <header-template-phone>
      <template v-slot:left>
        <div>
          <span class="icon" @click="handleGoBack">
            <i class="iconfont iconstbar_fanhui"></i>
          </span>
        </div>
      </template>
      <template v-slot:center>
        <div class="center-context">
          会员管理
        </div>
      </template>
      <template v-slot:right>
        <span @click="handleClick" class="icon">
          <i class="iconfont iconstbar_sousuo"></i>
        </span>
      </template>
    </header-template-phone>
    <div class="members-inner">
      <div class="general-info">
        <bill-board>
          <div class="billboard-content">
            <div class="item border-right">
              <div class="title">直属会员</div>
              <div class="statistics">
              <span>{{directMemberCount}}</span>
              <span class="extra">人</span>
              </div>
            </div>
            <div class="item border-right">
              <div class="title">全部会员</div>
              <div class="statistics">
              <span>{{totalMemberCount}}</span>
              <span class="extra">人</span>
              </div>
            </div>
            <div class="item">
              <div class="title">团队余额</div>
              <div class="balance statistics">
                <span>{{groupBalance}}</span>
                <span class="extra">.00</span>
              </div>
            </div>
          </div>
        </bill-board>
      </div>
      <div class='team-info'>
        <div class="title">
          直属会员
        </div>
        <div class="members">
          <member-info v-for="(item, index) in members" :key="index" :item="item"></member-info>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import BillBoard from '@/components/base/bill-board/bill-board'
import MemberInfo from './components/member-info'
import { mapGetters } from 'vuex';
export default {
  components: {
    HeaderTemplatePhone,
    BillBoard,
    MemberInfo
  },
  data() {
    return {
      
   }
  },
  methods:{
    handleGoBack() {
      this.$router.go(-1)
    }
  },
  computed: {
    ...mapGetters(['getUserInfo']),
    directMemberCount() {
      return this.getUserInfo.myTeam.directMembers
    },
    totalMemberCount() {
      return this.getUserInfo.myTeam.totalMembers
    },
    groupBalance() {
      return this.getUserInfo.myTeam.groupBalance
    },
    members() {
      return this.getUserInfo.myTeam.members 
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
    .member-management
      .center-context 
        font-size 15px
        color #fff
      .members-inner
        box-sizing border-box 
        padding-top 48px
        .general-info 
          width 100%
          height 85px
          // background-color #ccc
          padding 10px 10px 5px 10px
          box-sizing border-box
          position relative
          .billboard-content 
            width 100% 
            display flex
            height 70px
            background #fff
            .item 
              width 33.33% 
              box-sizing border-box 
              display flex 
              flex-direction column 
              justify-content center
              .title 
                margin-bottom 10px
                color $color-sub-grey
              .statistics
                display inline-block
                &.balance
                  color $color-theme-red
                span 
                  font-size 15px
                .extra 
                  display inline-block
                  font-size 10px
        .team-info 
          box-sizing border-box 
          padding 0 10px
          .title 
            height 45px 
            line-height 45px 
            font-size 15px 
            font-weight 700   
        .members 
          border-radius 3px 
          overflow hidden
          border 1px solid $color-divide-line
          box-shadow 1px 0px 1px -1px $color-sub-grey, -1px 0px 1px -1px
             
        
                
</style>